<template>
  <!-- <div>新建信息</div> -->
  <div class="sidelip-box">
    <Form
      ref="formRole"
      class="ivu-form-no-margin-bottom"
      :label-width="110"
      :model="detailData"
    >
      <Row :gutter="20" class="code-row-bg">
        <Col span="24" style="border: none;" v-for="(item, index) in detailData.formData"
            :key="index"  >
          <Form-item :label="item.fieldName" 
            :prop="'formData.' + index + '.value'"
            :rules="item.rules">
            <Input
              v-if="item.type === 'input'"
              type="text"
            
              v-model="item.value" :placeholder="item.placeholder"
              size="small"
              :maxlength="50"
              style="width: 100%;"
              :disabled="item.disabled ? item.disabled :isDisabled"
            >
            <!--  @on-blur="blurHandle(index) -->
            </Input>
            <Input
            v-if="item.type === 'textarea'"
              type="textarea"
              v-model="item.value" :placeholder="item.placeholder"
              :rows="4"
              size="small"
              style="width: 100%;"
              :disabled="item.disabled ? item.disabled :isDisabled"
            ></Input>
            <Select v-if="item.type === 'select'" v-model="item.value" :disabled="item.disabled ? item.disabled :isDisabled">
              <Option v-for="item in item.optionList" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
            <DatePicker
              type="date"
              v-if="item.type === 'date'"
              @on-change="dateHandle($event, item)"
              :transfer="true"
              :editable="false"
              :clearable="true"
              placement="bottom-end"
              style="width: 100%;"
              size="small"
              :placeholder="item.placeholder"
              :disabled="item.disabled ? item.disabled :isDisabled"
              >
            </DatePicker>
          </Form-item>
        </Col>
      </Row>
    </Form>
  </div>

</template>

<script>
import { mixin } from '../mix/mixin'
import { formData } from './detail-constants'
import ruleBaseAPI from "@/api/ruleBaseApi.js"

export default {
  name: 'add-modal',
  mixins: [mixin],
  props: {
    title: {
      type: String,
      default() {
        return "";
      }
    },
    parent:{
      type: String,
      default() {
        return "";
      }
    },
    detailId:{
      type: String,
      default() {
        return "";
      }
    },

    codeInt:{
      type: String,
      default() {
        return "";
      }
    },
    groupCode: {
      type: String,
      default() {
        return "";
      }
    },
    detailRow: {
      type: Object,
      default() {
        return {};
      }
    },
    isDisabled: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    searchData() {
      return formData.bind(this)()
    }
  },
  data() {
    return {
      // formData:formData,
      detailData: {
        formData: []
      },
      actions: [
        {
          text: this.$t("common.save"),
          theme: "primary",
          icon: "edit",
          handle: () => {
            this.saveOrUpdate();
          },
          loading: false
        },
        {
          text: this.$t("common.close"),
          type: "default",
          handle: () => {
            this.$emit("Close");
          }
        }
      ]
    }
  },
  created() {
    this.detailData.formData = JSON.parse(JSON.stringify(this.searchData))
    
    this.$emit("SetTitle", this.title);
    this.$emit("SetPageWidth", 700);
    this.$emit("SetPageActions", this.actions);
    if (this.detailId && this.groupCode) {
      this.detailData.formData.forEach((item) => {
        for (let i in this.detailRow) {
          if (item.field == i) {
            item.value = this.detailRow[i]+''
          }
        }
      })
    }
    if(this.codeInt || (this.groupCode && !this.detailId)){
      this.detailData.formData.forEach((item) => {
        if (item.field == 'groupCode') {
          item.value = this.codeInt ? this.codeInt : this.groupCode
        } else {
          item.value=''
        }
      })
    }
    if (this.isDisabled) {
      this.actions.shift()
    }
  },
  methods: {
    dateHandle(e, item) {
      item.value = e
    },
    // blurHandle(index) {
    //   console.log('222222222', this.formData, index);
    // },
    //数组转对象
    arrobj(formData){
      return formData.reduce((obj, item) => {
        obj[item.field] = item.value
        return obj
      },{})
    },
    saveOrUpdate() { 
      if (this.detailId && this.groupCode) {
        this.$refs.formRole.validate((valid) => {
          if (valid) { 
            const dataForm = this.detailData.formData 
            let params = this.arrobj(dataForm)
            // let params = this.arrobj(this.searchData)
            params.groupCode = this.groupCode
            params.id = this.detailId
            params.version = this.detailRow.version
            this.$confirm.warning(this.$t("确定修改吗？")).then(() => { 
                ruleBaseAPI.updateTable(params).then(res => {
              this.$message.success({
                    content: this.$t("修改成功"),
                    duration: 3
              });
              this.$emit("Close");
            })
          })
          }else{this.$Message.error('检查是否完整填写相关内容！！!');}
         })
      }

      if (this.codeInt || (this.groupCode && !this.detailId)) {
        this.$refs.formRole.validate((valid) => { 
          if (valid) {
            const dataForm = this.detailData.formData 
            let params = this.arrobj(dataForm)
            // let params = this.arrobj(this.searchData)
            params.groupCode = this.codeInt ? this.codeInt : this.groupCode
            params.parent = this.parent 
            this.$confirm.warning(this.$t("确定新建吗？")).then(() => {
              ruleBaseAPI.createTable(params).then(res => {
                this.$message.success({
                      content: this.$t("新建成功"),
                      duration: 3
                });
                  this.$emit("Close");
              })
            })
          } else {this.$Message.error('检查是否完整填写相关内容！！!');}
        })
      }
      
    },
  }

}
</script>

<style>

</style>